<template>
	<view class="page">
		<!-- 系统按主标题，次标题，英文标题的方式排列 -->
		<view class="logo">
			<image src="../../static/Dp/Logo_487x93.png"></image>
		</view>
		<image class="big-logo" src="../../static/Dp/Index-Logo_488x1219.png" mode="widthFix"></image>
		<view class="btn" @click="Enter">
			{{ loadingStateText }}
		</view>
	</view>
</template>

<script>
	import { ref, reactive, watch, computed } from 'vue'
	import { useServerData } from '@/stores/digitalPlatform/useServerData'
	import setShare from '../../share.js'
	export default {
		setup () {
			setShare({
				title: '数字博物馆 - 云上埔坪',
				path: "/pages/DigitalPlatform/Index"
			});
			let loadingStateText = ref("加载中");
			let loadingSession = null;
			let Enter = () => {
				if (!loadingSession) {
					return;
				}
				
				loadingSession.Enter();
			};
			
			let msg = useServerData("/pages/DigitalPlatform/FeatureContent");
			msg.then(g => {
				loadingStateText.value = g.loadingStateText.value;
				loadingSession = g;
			});
			
			return {
				loadingStateText,
				Enter
			};
		}
	}
</script>

<style lang="less">
	/* 使用LESS开发，可以优化开发效率 */
	.page {
		/* 全屏的写法如下，这种写法相较于width: 100%;和height: 100%;更优。这种写法允许内部元素垂直居中 */
		position: absolute;
		left: 0rpx;
		right: 0rpx;
		top: 0rpx;
		bottom: 0rpx;
		background: url(https://www.lin-home.com/static/Community/main-bg.jpg) 50% 50% / cover;
		padding-top: var(--status-bar-height);
		
		.logo {
			margin: 40rpx 0 0 34rpx;
			width: 372rpx;
			height: 71rpx;
			image {
				object-fit: contain;
				width: 100%;
				height: 100%;
			}
		}
		
		.big-logo {
			display: block;
			width: 430rpx;
			position: absolute;
			left: calc(50vw - 430rpx / 2);
			top: calc(50vh - 1200rpx / 2);
		}
		
		.btn {
			/* 内部只有文本节点，高度即设定为文本的line-height不需要写height */
			display: block;
			
			position: absolute;
			bottom: 200rpx;
			left: calc(50% - 330rpx / 2);
			
			width: 330rpx;
			height: 110rpx;
			
			/* 透明底使用rgba即可 rgba(红，绿，蓝，不透明度) */
			background-color: rgba(0, 0, 0, .4);
			border-radius: 55rpx;
			border: 2px solid #fff;
			cursor: pointer;
			
			/** 文本1 */
			font-size: 40rpx;
			letter-spacing: 10rpx;
			text-align: center;
			line-height: 110rpx;
			color: #fff;
		}
	}
</style>